<template>
  <div v-if="showTitle" class="f">
    <div class="f ac">
      <div class="tr mr5" style="width:50px;">省：</div>
       <Select ref="provinceRef" v-model="myProvince" @on-change="changeProvince" placeholder="请选择省" clearable class="f1 mr10" style="max-width:130px;min-width:100px">
        <Option v-for="item in provinceList" :key="item.code" :value="item.name">{{item.name}}</Option>
      </Select>
    </div>
    <div class="f ac">
      <div class="tr mr5" style="width:50px;">市:</div>
      <Select ref="cityRef" v-model="myCity" @on-change="changeCity" placeholder="请选择市" clearable class="f1 mr10" style="max-width:130px;min-width:100px">
        <Option v-for="item in cityList" :key="item.id" :value="item.label">{{item.label}}</Option>
      </Select>
    </div>
    <div class="f ac">
      <div class="tr mr5" style="width:50px;">县/区:</div>
      <Select ref="areaRef" v-model="myArea" @on-change="changeArea" placeholder="请选择县/区" clearable class="f1 mr10" style="max-width:130px;min-width:100px">
        <Option v-for="item in areaList" :key="item.id" :value="item.label">{{item.label}}</Option>
      </Select>
    </div>
    <div class="f ac">
      <div class="tr mr5" style="width:50px;">镇:</div>
      <Select v-show="showTown" ref="townRef" v-model="myTown" @on-change="changeTown" placeholder="请选择镇" clearable class="f1" style="max-width:130px;min-width:100px">
        <Option v-for="item in townList" :key="item.id" :value="item.label">{{item.label}}</Option>
      </Select>
    </div>
    <div class="f ac">
      <div class="tr mr5" style="width:50px;">村:</div>
      <Select v-show="showVillage" ref="villageRef" v-model="myVillage" @on-change="changeVillage" placeholder="请选择村" clearable class="f1" style="max-width:130px;min-width:100px">
        <Option v-for="item in villageList" :key="item.id" :value="item.label">{{item.label}}</Option>
      </Select>
    </div>
  </div>
  <!--不带标题的-->
  <div v-else class="f">
    <Select ref="provinceRef" v-model="myProvince" @on-change="changeProvince" placeholder="请选择省" clearable class="f1 mr10" style="max-width:130px;min-width:100px">
      <Option v-for="item in provinceList" :key="item.code" :value="item.name">{{item.name}}</Option>
    </Select>
    <Select ref="cityRef" v-model="myCity" @on-change="changeCity" placeholder="请选择市" clearable class="f1 mr10" style="max-width:130px;min-width:100px">
      <Option v-for="item in cityList" :key="item.id" :value="item.label">{{item.label}}</Option>
    </Select>
    <Select ref="areaRef" v-model="myArea" @on-change="changeArea" placeholder="请选择县/区" clearable class="f1 mr10" style="max-width:130px;min-width:100px">
      <Option v-for="item in areaList" :key="item.id" :value="item.label">{{item.label}}</Option>
    </Select>
    <Select v-show="showTown" ref="townRef" v-model="myTown" @on-change="changeTown" placeholder="请选择镇" clearable class="f1" style="max-width:130px;min-width:100px">
        <Option v-for="item in townList" :key="item.id" :value="item.label">{{item.label}}</Option>
    </Select>
    <Select v-show="showVillage" ref="villageRef" v-model="myVillage" @on-change="changeVillage" placeholder="请选择村" clearable class="f1" style="max-width:130px;min-width:100px">
      <Option v-for="item in villageList" :key="item.id" :value="item.label">{{item.label}}</Option>
    </Select>
  </div>
</template>
<script src="./index.js"></script>
<style scoped>
</style>